<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--胡子语法-->
    <h3>{{title}}</h3>
</div>
<script>
    var v = new Vue({
        el: "#app",//绑定元素,不能绑定body
        data: {
            title: "测试标题"
        }//数据模型
    })
</script>

<fieldset id="f1">
    <legend>练习题1</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);"><img v-bind:src="head"
                width="50%"><br>
            <div style="display: inline-block; vertical-align: top; line-height: 2em;">
                <label>姓名: </label><span v-cloak>{{name}}</span><br>
                <label>性别: </label><span v-text="gender">女</span><br>
                <label>绰号: </label><span  v-text="alias">一丈青</span><br>
                <label>年龄: </label><span v-text="age">22</span><br>
                <label>介绍：</label><span v-html="intro"></span>
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">{
    name: "武松",
    gender: "男",
    alias: "行者",
    age: 28,
    head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707'
}
        </pre>
    </div>
</fieldset>

<script>
    setTimeout(() => {
        var f1 = new Vue({
            el: "#f1",
            data: {
                name: "武松",
                gender: "男",
                alias: "行者",
                age: 28,
                head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707',
                intro: `<h3>生平介绍</h3>`
            }
        })
    }, 5000)
</script>
//====================================================================================================================================================

<fieldset id="f2">
    <legend>练习题2</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div style="margin: 5px; text-align: center;">平均年龄: {{avgAvg}}, 平均武力: 88, 总武力: 264</div>
            <div v-for="h in heros" style="border: 1px solid blueviolet; padding: 5px; margin: 5px;"><img
                    :src="h.head"
                    height="130px">
                <div style="display: inline-block; vertical-align: top; line-height: 1.3em;" v-for="h in heros">
                    <label>姓名: </label><span>{{h.name}}</span><br>
                    <label>性别: </label><span>{{h.gender}}</span><br>
                    <label>绰号: </label><span>{{h.alias}}</span><br>
                    <label>年龄: </label><span>{{h.age}}</span><br>
                    <label>武力: </label><span>{{h.武力}}</span><br></div>
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">[{
    name: "武松",
    gender: "男",
    alias: "行者",
    age: 28,
    武力: 90,
    head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707'
},
{
    name: "林冲",
    gender: "男",
    alias: "豹子头",
    age: 95,
    head: 'https://img2.baidu.com/it/u=1956721953,4058938663&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=800&amp;h=994'
},
{
    name: "扈三娘",
    gender: "女",
    alias: "一丈青",
    age: 88,
    head: 'https://img0.baidu.com/it/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=667'
},
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f2=new Vue({
        el:"#f2",
        data:{
            heros:[
                {
                name: "武松",
                gender: "男",
                alias: "行者",
                age: 28,
                武力: 90,
                head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707'
                },
                {
                    name: "林冲",
                    gender: "男",
                    alias: "豹子头",
                    age: 95,
                    head: 'https://img2.baidu.com/it/u=1956721953,4058938663&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=800&amp;h=994'
                },
                {
                    name: "扈三娘",
                    gender: "女",
                    alias: "一丈青",
                    age: 88,
                    head: 'https://img0.baidu.com/it/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=667'
                },
            ]
        },
        computed: {
            avgAvg() {
                let sum = 0;
                this.heros.forEach(h => {
                    sum += h.age;
                })
                return sum / this.heros.length;
            }
        }
    })
</script>

//======================================================================================================================
<fieldset id="f3">
    <legend>练习题3</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div><img width="50%"
                      src="./Vue练习_files/u=1790110791,1533166735&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"><br>
                <span>刘唐</span></div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">{
    name: "林冲",
    head: "https://img0.baidu.com/it/u=4053272622,2573201558&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=584",
    imgStyle:{
                width: "200px",
                height: "200px",
                objectFit: "cover",
                borderRadius: "50%";
                overflow: "hidden"
              },
    spanStyle:{
                display: "inline-block",
                border: "1px blue solid",
                width: "100%",
                padding: "5px 10px",
                boxSizing: "border-box",
              }
}

        </pre>
    </div>
</fieldset>
<script>
    var f3=new Vue({
        el:"#f3",
        data:{
            name:"傅总",
            head:"https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707",
            imgStyle:{
                imgStyle:{
                    width: "200px",
                    height: "200px",
                    objectFit: "cover",
                    borderRadius: "50%",
                    overflow: "hidden"
                },
                spanStyle:{
                    display: "inline-block",
                    border: "1px blue solid",
                    width: "100%",
                    padding: "5px 10px",
                    boxSizing: "border-box",
                }
            }
        },
    })
</script>
//=====================================================================================================================
<fieldset>
    <legend>练习题4</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div id="div1"><img width="100px"
                                src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                <br> 关注样式
            </div>
            <div id="div2"><img width="100px"
                                src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                <br> 关注样式
            </div>
            <div id="div3"><img width="100px"
                                src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                <br> 关注样式
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">.border {
    border: 2px solid blue;
}

.text {
    color: red;
    text-align: center;
}

.size {
    width: 150px;
    height: 150px; padding : 5px;
    display: inline-block;
    margin: 5px;
    padding: 5px;
}
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
//===========================================================================================================================
<fieldset id="f6">
    <legend>练习题5</legend>
    <div style="display: grid; grid-template-columns: 93% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <table border="1" style="width: 100%; text-align: center;">
                <tbody>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>绰号</th>
                    <th>力量</th>
                    <th>智力</th>
                    <th>敏捷</th>
                    <th>综合战斗力</th>
                </tr>
                <tr v-for="(h,i) in heroes">
                    <td>第{{i+1}}名</td>
                    <td>{{h.name}}</td>
                    <td>{{h.alias}}</td>
                    <td>
                        <button @click="h.p--;sort()">-</button>
                        {{h.p}}
                        <button @click="h.p++;sort()">+</button>
                    </td>
                    <td>
                        <button @click="h.i--">-</button>
                        {{h.i}}
                        <button @click="h.i++">+</button>
                    </td>
                    <td>
                        <button @click="h.a--">-</button>
                        {{h.a}}
                        <button @click="h.a++">+</button>
                    </td>
                    <td> {{h.p+h.i+h.a}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
            <small>排序</small> <select>
            <option>力量</option>
            <option>智力</option>
            <option>敏捷</option>
            <option>综合</option>
        </select></div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 将水浒英雄显示到表格中
2. 实现属性值的加减
3. 统计出每个影响的综合战斗力: 力量+智力+敏捷
4. 根据实时计算结果, 实现排序
*/
var Hero = function(name,alias,p,i,a){
    this.name = name;
    this.alias = alias;
    this.p = p;
    this.i = i;
    this.a = a;
}
var heroes = [
    new Hero("林冲","豹子头",99,85,90),
    new Hero("武松","行者",98,80,88),
    new Hero("秦明","霹雳火",95,82,85),
    new Hero("白胜","白日鼠",75,80,85),
    new Hero("石秀","拼命三郎",97,82,83),
];
            </pre>
    </div>
</fieldset>
<script>
    var Hero = function(name,alias,p,i,a){
        this.name = name;
        this.alias = alias;
        this.p = p;
        this.i = i;
        this.a = a;
    }
    var f6=new Vue({
        el:"#f6",
        data:{
            heroes:[
                new Hero("林冲","豹子头",99,85,90),
                new Hero("武松","行者",98,80,88),
                new Hero("秦明","霹雳火",95,82,85),
                new Hero("白胜","白日鼠",75,80,85),
                new Hero("石秀","拼命三郎",97,82,83),]
        },
        methods: {
            sort(){
                this.heroes.sort((a,b)=>a.p-b.p);
            }
        },
    })
</script>

//======================================================================================================================
<fieldset id="f7">
    <legend>练习题6</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <form action="http://47.106.66.89:8080/teach/vue/Vue%E7%BB%83%E4%B9%A0.html" style="line-height: 2em;">
                姓名: <input name="name" v-model="sj.name"><br>
                绰号: <input name="alias" v-model="sj.alias"><br>
                学历: <select name="edu" v-model="sj.edu">
                <option>xxxxxx</option>
            </select><br>
                职位: <span><input name="job" type="radio"></span><br>
                爱好: <span><input name="like" type="checkbox"></span><br>
                介绍: <textarea name="desc"></textarea><br>
                <button style="margin-left: 166px;">提交</button>
            </form>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 学历, 职位, 爱好的选项添加到对应的控件中
2. 将宋江的个人信息绑定到表单的对应元素中
*/
var sj = {
    name : "宋江",
    alias : "及时雨",
    edu : "秀才",
    job : "老大",
    like : ["读书","下棋","喝酒"],
    desc : "宋江（1073年—1124年），字公明，绰号呼保义、及时雨、孝义黑三郎，施耐庵所作古典名著《水浒传》中的主人公。原为山东省郓城县押司，身材矮小，面目黝黑，为梁山起义军领袖"
};
var eduItems = ["进士","贡士","举人","秀才"];
var jobItems = ["老大","军师","武将","工匠"];
var likeItems = ["使枪","弄棒","喝酒","绣花","读书","蹴鞠","书法","绘画","下棋"];
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f7=new Vue({
        el:"#f7",
        data:{
            sj:{
                name : "宋江",
                alias : "及时雨",
                edu : "秀才",
                job : "老大",
                like : ["读书","下棋","喝酒"],
                desc : "宋江（1073年—1124年），字公明，绰号呼保义、及时雨、孝义黑三郎，施耐庵所作古典名著《水浒传》中的主人公。原为山东省郓城县押司，身材矮小，面目黝黑，为梁山起义军领袖"

            },
            eduItems:["进士","贡士","举人","秀才"],
            jobItems:["老大","军师","武将","工匠"],
            likeItems:["使枪","弄棒","喝酒","绣花","读书","蹴鞠","书法","绘画","下棋"],
        }
    })
</script>

</body>
</html>
